<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 30px;
        }

        table {
            margin: 0 auto;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <table width="1200px" border="1">
            <tr>
                <th>序号</th>
                <th>商品名</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>删除按钮</th>
            </tr>
            <tr v-for="(goods, index) in cartList" :key="goods.goods_name+index">
                <td>{{index+1}}</td>
                <td>{{goods.goods_name}}</td>
                <td>{{goods.price}}</td>
                <td> <button @click="countMinus(index)">-</button>
                    {{goods.num}}
                    <button @click="countAdd(index)">+</button>
                </td>
                <td>{{goods.count}}</td>
                <td><button style="width: 50px;height: 50px;font-size: 20px;" @click="removeGoods(index)">删除</button>
                </td>
            </tr>

        </table>
        <p style="width:1300px; margin: 20px auto;font-size: 30px;">
            添加商品<br>
            商品名：<input type="text" v-model.trim="new_goods.goods_name">
            单价：<input type="text" v-model.trim.number="new_goods.price">
            数量：<input type="text" v-model.trim.number="new_goods.num">
            小计：{{new_goods.price * new_goods.num }}
            <br>
            <button @click="addGoods">确认添加</button>
            {{new_goods}}
        </p>
        <p style="width:800px; margin: 20px auto;font-size: 30px;">
            总计: {{total}}
        </p>
    </div>

</body>
<script src=" https://cdn.jsdelivr.net/npm/vue@2.6.14">
</script>
<script>

    // 实例化Vue对象
    let app = new Vue({
        el: '#app',         // Vue对象在页面中的作用容器
        // 当前Vue对象设置的默认数据
        data: {
            api_cart_list: [],
            new_goods: {}
        },
        // 使用生命周期
        // beforeCreate: function () {
        //     this.test()
        // },
        mounted: function () {
            // 初始化添加新商品的对象数据
            this.initNewGoods()

            // 模拟通过API获取数据
            setTimeout(() => {
                this.api_cart_list = [
                    { goods_name: '小明的香吻', price: 500, num: 1 },
                    { goods_name: '小明的共餐机会', price: 1500, num: 2 },
                    { goods_name: '小明的祝福', price: 200, num: 4 },
                    { goods_name: '小明的爱', price: 3500, num: 1 },
                ]
            }, 1000)

        },

        // methods是当前应用定义的函数方法
        methods: {
            addGoods: function () {
                // 计算小计完整商品对象
                this.new_goods.count = this.new_goods.price * this.new_goods.num

                // 把商品对象放入购物车列表
                // this.cart_list[this.cart_list.length] = this.new_goods
                // 如果直接添加商品，这样的话商品值就变成了引用赋值 
                // this.cart_list.push(this.new_goods)

                // 为主防止出现引用赋值的情况出现。我们需要进行值的拷贝而不是变量拷贝
                let goods = {}
                // goods.goods_name = this.new_goods.goods_name
                // goods.price = this.new_goods.price
                // goods.num = this.new_goods.num
                // goods.count = this.new_goods.count
                // 使用浅拷贝完成对象的拷贝
                for (x in this.new_goods) {
                    goods[x] = this.new_goods[x]
                }

                this.api_cart_list.push(goods)

                // 初始化添加商品的数据
                this.initNewGoods()
                // console.log(this.cart_list)
            },

            initNewGoods: function () {
                this.new_goods = {
                    goods_name: '',
                    price: null,
                    num: null,
                    count: 0
                }
            },
            removeGoods: function (index) {
                this.api_cart_list.splice(index, 1)
            },
            countMinus(index) {
                if (this.api_cart_list[index].num > 0) {
                    this.api_cart_list[index].num--;
                }
            },
            countAdd(index) {
                this.api_cart_list[index].num++;
            }
        },
        // 计算属性
        computed: {
            total: function () {
                let total = 0
                // 通过循环遍历当前的购物车列表数据进行累加计算得到总计
                for (goods of this.cartList) {
                    total += goods.count
                }

                return total
            },
            cartList: function () {
                let list = []
                let o = {}
                for (goods of this.api_cart_list) {
                    // console.log(goods)
                    // 进行数据的浅拷贝
                    o = {}
                    for (x in goods) {
                        o[x] = goods[x]
                        // console.log(goods[x])
                    }

                    o.count = goods.price * goods.num
                    list.push(o)

                }
                console.log(list)

                return list
            }
        }


    })


</script>

</html>